<template>
	<view class="index">
		<view class="tabs-wrapper">
			<v-tabs v-model="current" :tabNumbers="tabNumbers" :tabs="tabList" :scroll="false" :bold="false"
				lineHeight="4rpx" lineColor="#F26022" activeColor="#F26022" color="#79838A" fontSize="30rpx"></v-tabs>
		</view>
		<view class="page-wrapper">
			<swiper class="swiper" :current="current" @change="changePage">
				<swiper-item class="swiper-item" v-for="(_swiper,i) in tabList" :key="i">
					<mescroll-item ref="mescrollItem" @refresh="search" :keywords="keywords" :i="i"
						:index="current"></mescroll-item>
				</swiper-item>
			</swiper>
		</view>

		<mx-date-picker :show="showPicker" type="date" format="yyyy-mm-dd" :end="today" :value="date" :show-tips="false"
			@confirm="confirmDate" @cancel="showPicker=false" />
	</view>
</template>

<script>
	import MescrollItem from "./mescroll-swiper-item.vue";
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";

	export default {
		data() {
			return {
				tabList: ['待接车', '已完成'],
				tabNumbers: [],
				first: true,
				current: 0,
				swiperList: [],
				keywords: '',
				dateIndex: 1,
				searchDate: this.$helper.getDay(0, '-'),
				showPicker: false,
				date: this.$helper.getDay(-1, '-'),
				today: this.$helper.getDay(0, '-')
			}
		},
		mounted() {
			//this.getCount()
		},
		computed: {

		},
		methods: {
			changePage(e) {
				this.current = e.detail.current;
			},
			dayStr(type) {
				let str = '';
				if (type === 0) {
					str = '明天 ' + this.$helper.getDay(1, '-').substring(5, 10)
				} else if (type === 1) {
					str = '今天 ' + this.$helper.getDay(0, '-').substring(5, 10)
				} else if (type === 2) {
					if (this.date === this.$helper.getDay(-1, '-')) {
						str = '昨天 '
					}
					str += this.date.substring(5, 10)
				}
				return str;
			},
			changeDate(type) {
				this.dateIndex = type;
				if (type === 0) {
					this.searchDate = this.$helper.getDay(1, "-")
					this.refresh()
				} else if (type === 1) {
					this.searchDate = this.$helper.getDay(0, "-")
					this.refresh()
				} else {
					//console.log(this.date)
					if (this.date !== this.searchDate) {
						this.searchDate = this.date;
						this.refresh()
					}
				}
			},
			confirmDate(e) {
				this.date = e.value;
				this.changeDate(2)
				this.showPicker = false;
			},
			changePicker() {
				if (this.dateIndex === 2) {
					this.showPicker = true;
				} else {
					this.changeDate(2)
				}
			},
			async getCount() {
				// const data = await this.$api.post('/app/transport/departStatusCount', {
				// 	dispatchDate: this.single,
				// 	licensePlateNo: this.keywords
				// })
				// if (data.code === 200) {
				// 	this.tabNumbers = [data.data.waiting, data.data.departed]
				// }
			},
			refresh() {
				this.$refs.mescrollItem.refresh();
			},
			search() {
				this.$refs.mescrollItem.refresh();
			},
		},
		components: {
			MescrollItem,
			MxDatePicker
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: hidden;

		.swiper {
			height: calc(100vh - 70upx);

			.tip {
				color: #FF8D1A;
				background-color: #ffffff;
				border-radius: 20upx;
				padding: 20upx;
				font-size: 28upx;
			}

			.nodata-wrapper {
				text-align: center;
				font-size: 32upx;
				color: #666666;

				.nodata-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 246upx;
				}

				.loading-image {
					margin-top: 300upx;
					margin-bottom: 10upx;
					width: 296upx;
					height: 205upx;
				}
			}
		}

	}
</style>